<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3480126_q9hrksv5bq.css">
    </link>
</head>

<body>
    <div class="nav">
        <div class="con">
            <div class="left1">
            </div>
            <div class="right1">
                <div class="listxx">
                    <ul>
                        <li class="hd geth">首页</li>
                        <li class="hd gets">书库</li>
                        <li class="hd getl">排行榜</li>
                        <li class="hd getn">作家专区</li>
                        <li class="hd">作家福利</li>
                    </ul>
                </div>
                <div class="list2">
                    <div class="search">
                        <div class="ipt">
                            <input type="text" placeholder="请输入书名或者作者" id="ipt">
                        </div>
                        <div class="searchList">
                            <button class="sr"><i class="iconfont icon-sousuo"></i></button>
                        </div>
                    </div>
                    <div class="lr">
                        <span class="llrr">登录</span>
                        <span class="s">|</span>
                        <span class="llrr">注册</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bx">
        <div class="listmenu">
            <div class="left">
                <ul>
                    <li class="cate">读者: </li>
                    <li class="cate">分类: </li>
                    <li class="cate">状态: </li>
                    <li class="cate">字数: </li>
                </ul>
            </div>
            <div class="right">
                <ul class="m_list1">
                    <li class="ssw">全部</li>
                    <li class="ssw">男生</li>
                    <li class="ssw">女生</li>
                </ul>
            </div>
        </div>
        <div class="hots">
            <div class="ce">
                <ul>
                    <li class="lis">相关</li>
                    <li class="lis">最新</li>
                    <li class="lis">最热</li>
                </ul>
            </div>
        </div>
        <div class="n_list">
            <ul class="nl_list">

            </ul>
        </div>
        <div class="ft_btn">
            <ul class="btns_">

            </ul>

        </div>
    </div>
    <div class="footer">
        <div class="ff">
            <div class="cont">
                <div class="left">
                    <div class="top">

                    </div>
                    <div class="cc">

                    </div>
                    <div class="ft">
                        <ul>
                            <li>2022 北京时光荏苒科技有限公司</li>
                            <li>京ICP备18018851号-8 |京公网安备 11010802030409号 | 京ICP证 京B2-20200085号 |</li>
                            <li>网络文化经营许可证：京网文[2020]1043-169号</li>
                            <li>请使用者仔细阅读《番茄小说网用户协议》、《番茄小说网隐私政策》说明</li>
                            <li>广告投放：www.oceanengine.com 不良信息举报：fanqiejubao@bytedance.com</li>
                            <li>意见建议邮箱：original_articles@bytedance.com 版权咨询：1748420113@qq.com</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="xcx">
                    <div class="ig">
                        <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/5180eh7pldnuhog/muye-novel-web-pc/dycode.png"
                            alt="">
                    </div>
                    <div class="tx">
                        <p><i class="iconfont icon-douyin"></i> 打开抖音扫码关注官方账号</p>
                    </div>
                </div>
                <div class="code_ma">
                    <div class="m">
                        <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/5180eh7pldnuhog/muye-novel-web-pc/wechat.png"
                            alt="">
                    </div>
                    <div class="tt">
                        <p><i class="iconfont icon-weixin1"></i> 扫码关注微信公众号</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    let right = document.querySelector(".right");

    const result = async () => {
        let res = await axios.get('/getCategory');
        let data = [...res.data.data];
        let ul1 = document.createElement('ul');
        ul1.className = "uls1"
        data.map(el => {
            let lis = document.createElement('li');
            lis.className = "lis1"
            lis.innerHTML = el.classes
            ul1.appendChild(lis);
            right.appendChild(ul1);
        })
        let ul2 = document.createElement('ul');
        ul2.className = "uls2"

        let res1 = await axios.get('/getState');
        let data1 = [...res1.data.data];
        data1.map(el => {
            let lis = document.createElement('li');
            lis.className = "lis2"

            lis.innerHTML = el.state
            ul2.appendChild(lis);
            right.appendChild(ul2);
        })
        let res2 = await axios.get('/getCount');
        let data2 = [...res2.data.data];
        let ul3 = document.createElement('ul');
        ul3.className = "uls3"
        data2.map(el => {
            let lis = document.createElement('li');
            lis.className = "lis3"
            lis.innerHTML = el.count + "万字以上"
            ul3.appendChild(lis);
            right.appendChild(ul3);
        })
        let lis1 = document.querySelectorAll(".lis1")
        lis1[0].style.backgroundColor = "rgba(250,103,37,.1)"
        lis1[0].style.color = "#ff5000";
        let lis2 = document.querySelectorAll(".lis2")
        lis2[0].style.backgroundColor = "rgba(250,103,37,.1)"
        lis2[0].style.color = "#ff5000";

        let lis3 = document.querySelectorAll(".lis3")
        lis3[0].style.backgroundColor = "rgba(250,103,37,.1)"
        lis3[0].style.color = "#ff5000";

        let mlist = document.querySelectorAll(".ssw")
        mlist[0].style.backgroundColor = "rgba(250,103,37,.1)"
        mlist[0].style.color = "#ff5000";
        lis3[0].innerHTML = "全部"
        lis3[0].style.width = 60 + "px"
        for (let i = 0; i < lis1.length; i++) {
            lis1[i].onclick = function () {
                for (let i = 0; i < lis1.length; i++) {
                    lis1[i].style.color = ""
                    lis1[i].style.backgroundColor = ""
                }
                this.style.color = "#ff5000"
                this.style.backgroundColor = "rgba(250,103,37,.1)"
            }
        }
        for (let i = 0; i < lis2.length; i++) {
            lis2[i].onclick = function () {
                for (let i = 0; i < lis2.length; i++) {
                    lis2[i].style.color = ""

                    lis2[i].style.backgroundColor = ""
                }
                this.style.color = "#ff5000"
                this.style.backgroundColor = "rgba(250,103,37,.1)";
                // let keys = lis2[i].innerHTML
                // let states = {
                //     state: keys,

                // }
                // const getState = async () => {
                //     let nllist = document.querySelector('.nl_list');
                //     if (lis1[i] === lis1[0]) {
                //         getNovelsList()
                //     }
                //     let state = await axios.post('/novelsList', states)
                //     let sta = [...state.data.data]
                //     nllist.innerHTML = "";
                //     create(sta);
                // }
                // getState()
            }
        }
        for (let i = 0; i < lis3.length; i++) {
            lis3[i].onclick = function () {
                for (let i = 0; i < lis3.length; i++) {
                    lis3[i].style.color = ""

                    lis3[i].style.backgroundColor = ""
                }
                this.style.color = "#ff5000"
                this.style.backgroundColor = "rgba(250,103,37,.1)";
            }
        }
        for (let i = 0; i < mlist.length; i++) {
            mlist[i].onclick = function () {
                for (let i = 0; i < mlist.length; i++) {
                    mlist[i].style.color = ""

                    mlist[i].style.backgroundColor = ""
                }
                this.style.color = "#ff5000"
                this.style.backgroundColor = "rgba(250,103,37,.1)"
            }
        }
    }
    result()
    const getNovelsList = async () => {
        let limit = 18;
        let offset = 0
        let params = {
            limit: limit,
            offset: offset
        }
        let res = await axios.post("/novelsList", params);
        let ds = [...res.data.data.all]
        let pages = Math.ceil(ds.length / 18)
        let data = [...res.data.data.lm];
        create(data)
        let lisss = document.querySelectorAll(".lis1");
        let btnss = document.querySelector(".btns_")
        let ka = new Array(pages).fill(0)
        ka.map((el, index) => {
            let lli = document.createElement(`li`)
            lli.innerHTML = index + 1
            btnss.appendChild(lli);
            lli.addEventListener("click", async () => {
                let nllist = document.querySelector('.nl_list');

                nllist.innerHTML = ""
                offset = index * limit
                let resd = await axios.post('/novelsList', {
                    limit: limit,
                    offset: offset
                })
                data = [...resd.data.data.lm]
                create(data);
            });
        })
    }
    getNovelsList()

    function create(data) {
        let nllist = document.querySelector('.nl_list');
        return data.map(el => {
            let lis = document.createElement('li');
            lis.className = "sx"
            let d1 = document.createElement("div");
            d1.className = "d1";
            lis.appendChild(d1);
            let d2 = document.createElement("div");
            d2.className = "d2";
            lis.appendChild(d2);
            let aa = document.createElement("a");
            aa.href = `/public/detail/index.html?${el.id}`
            let ig = document.createElement("img");
            ig.src = el.img;
            aa.appendChild(ig);
            d1.appendChild(aa);
            let p1 = document.createElement("p");
            p1.className = "p1";
            p1.innerHTML = el.name;
            d2.appendChild(p1);
            let p3 = document.createElement("p");
            p3.className = "p3";
            p3.innerHTML = "作者: " + el.author_name;
            d2.appendChild(p3);
            let p4 = document.createElement("p");
            p4.className = "p4";
            p4.innerHTML = `${el.state} · ${el.count}万字 · ${el.isReading}万人在读`
            d2.appendChild(p4);
            let p5 = document.createElement("p");
            p5.className = "p5";
            p5.innerHTML = el.summary;
            d2.appendChild(p5);
            let p6 = document.createElement("p");
            p6.className = "p6";
            p6.innerHTML = "16小时前";
            d2.appendChild(p6);
            lis.appendChild(d2);
            nllist.appendChild(lis);
        })
    }
    let getn = document.querySelector('.getn')
    let getl = document.querySelector('.getl')
    let gets = document.querySelector('.gets')
    let geth = document.querySelector('.geth')
    getn.addEventListener('click',()=>{
        window.location.href = '/public/author_area/index.html'
    })
    getl.addEventListener('click',()=>{
        window.location.href = '/public/leaderboard/index.html'
    })
    gets.addEventListener('click',()=>{
        window.location.href = '/public/libary/index.html'
    })
    geth.addEventListener('click',()=>{
        window.location.href = '/public/home/index.html'
    })
    let ipt = document.getElementById("ipt")
    let btn = document.querySelector('.sr')
    btn.addEventListener('click', () => {
        let val = ipt.value
        if (val === '') return
        window.location.href = `/public/search/index.html?${val}`
    })
    let hds = document.querySelectorAll(".hd");
    hds[1].style.color = "#ff5000";
    hds[1].style.borderBottom = "2px solid #ff5000";
    for (let i = 0; i < hds.length; i++) {
        hds[i].onclick = function () {
            for (let i = 0; i < hds.length; i++) {
                hds[i].style.color = ""
                hds[i].style.borderBottom = ""
            }
            this.style.color = "#ff5000"
            this.style.borderBottom = "2px solid #ff5000"
        }
    }
</script>

</html>